<template>
  <div class="bcg">
    <header-comm></header-comm>

    <div class="xcgl_box">
      <div class="top_btn">
        <a-button type="primary" @click="addxcpic">新增相册</a-button>
      </div>
      <a-table
        @change="getphotoList"
        :loading="loading"
        :dataSource="xcgldata"
        :pagination="pagination"
        :columns="columns"
      >
        <template slot="image" slot-scope="text, record">
          <div class="xcgl_pic">
            <img :src="'http://image.bearing.cn/qy/member/album/'+record.image" alt />
            <div class="pic_tit">
              <div class="lef_tit">
                <span class="text">{{record.title}}</span>
                <span class="text">{{record.date}}</span>
              </div>
              <div class="rig_ed">
                <a-icon class="rig_ico" @click="editval(record)" type="form" />

                <a-popconfirm title="确定删除吗?" @confirm="() =>deletexc(record)">
                  <a-icon class="rig_ico" type="delete" />
                </a-popconfirm>
              </div>
            </div>
          </div>
        </template>
      </a-table>
    </div>
    <div class="tjxc_tk" v-if="tjxcflg">
      <tjxc></tjxc>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import tjxc from "../tjxc/tjxcym.vue";
import qs from "qs";
const columns = [
  {
    title: "",
    dataIndex: "image",
    scopedSlots: { customRender: "image" }
  }
];
export default {
  data() {
    return {
      columns,
      xcgldata: [],
      pagination: {
        defaultPageSize: 8,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      loading: false,
      tjxcflg: false,
      close: false,
      editvalue: ""
    };
  },

  methods: {
    getphotoList(pagination) {
      this.pagination = pagination;
      this.axios
        .post(
          "photo/photoList.php",
          qs.stringify({
            page: pagination.current,
            pageSize: pagination.defaultPageSize,
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            console.log(pagination.current);
            this.pagination.total = Number(res.data.result.total);

            for (var i = 0; i < res.data.result.data.length; i++) {
              res.data.result.data[i].key = i;
            }
            this.xcgldata = res.data.result.data;
          }
        });
    },
    addxcpic() {
      this.tjxcflg = true;
      this.close = true;
        this.editvalue=''
    },
    deletexc(value) {
      this.axios
        .post(
          "photo/photoDelete.php",
          qs.stringify({
            id: value.id
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            const dataSource = [...this.xcgldata];
            this.xcgldata = dataSource.filter(item => item.key !== value.key);
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.pagination.total -= 1;
            this.getphotoList(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    editval(value) {
      this.tjxcflg = true;
      this.$store.state.tjxceditflag = true;
      this.editvalue = value;
    }
  },
  components: {
    headerComm,
    tjxc
  },
  created() {
    this.getphotoList(this.pagination);
  }
};
</script>

<style lang='less'>
.xcgl_box {
  position: relative;
  top: 100px;
  left: 1%;
  background: #fff;
  width: 98%;

  //   width: 50%;
  .top_btn {
    text-align: left;
    padding: 20px;
    border-bottom: 1px solid #f1f1f1;
  }
  thead {
    display: none;
  }
  .ant-table-thead > tr,
  .ant-table-tbody > tr {
    display: inline-block;
    width: 25%;
  }
  .xcgl_pic {
    text-align: left;
    img {
      height: 300px;
      width: 100%;
    }
  }
  .pic_tit {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    .text {
      margin-right: 10px;
    }
    .rig_ico {
      margin: 0 10px;
      font-size: 20px;
      color: rgb(30, 101, 235);
    }
  }
}
.tjxc_tk {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  .tjxc_box {
    width: 64%;
    position: relative;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 10%);
  }
}
</style>
